<!-- 修改企业信息 -->
<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px">
            <el-breadcrumb-item :to="{ path: '/backstage/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/backstage/personal/viewInfo' }">个人中心</el-breadcrumb-item>
            <el-breadcrumb-item >修改企业信息</el-breadcrumb-item>
        </el-breadcrumb>

        <el-form  :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="修改企业头像" prop="avatar">
                <el-upload
                    class="avatar-uploader"
                    action=""
                    :show-file-list="false"
                    :http-request="uploadImage"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" title="点击更换头像">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="修改企业背景" prop="bgImage">
                <el-upload
                  class="avatar-uploader"
                  action=""
                  :show-file-list="false"
                  :http-request="uploadCompanyBgImage"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                <img v-if="bgImage" :src="bgImage" class="avatar" title="点击更换企业背景">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="企业名称" prop="companyName">
                <el-input prefix-icon="el-icon-s-custom" v-model="ruleForm.companyName" placeholder="请输入企业名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="企业联系人" prop="companyLeader">
                <el-input prefix-icon="el-icon-s-custom" v-model="ruleForm.companyLeader" placeholder="请输入企业联系人" clearable></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="companyPhone">
                <el-input prefix-icon="el-icon-phone" v-model="ruleForm.companyPhone" placeholder="请输入联系电话" clearable></el-input>
            </el-form-item>
            <el-form-item label="企业邮箱" prop="companyEmail">
                <el-input prefix-icon="el-icon-truck" v-model="ruleForm.companyEmail" placeholder="请输入企业邮箱" clearable></el-input>
            </el-form-item>
            <el-form-item label="企业地址" prop="companyAddress">
                <el-input prefix-icon="el-icon-office-building" v-model="ruleForm.companyAddress" placeholder="请输入企业地址" clearable></el-input>
            </el-form-item>
            <el-form-item label="企业简介" prop="companyIntroduction">
                <el-input type="textarea" :rows="10" prefix-icon="el-icon-document" v-model="ruleForm.companyIntroduction" placeholder="请输入企业简介" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { client } from "../../../utils/alioss";
import { updateCompanyInfo,getLoginCompanyInfo,checkPhoneExistApi } from "../../../api/enterpriseManage/index";
import { getStore } from '../../../storage/storage';
export default {
  data () {
      var checkPhone = (rule, value, callback) => {
        const phoneReg = /^1[3|4|5|6|7|8|9][0-9]{9}$/
        if (!value) {
            return callback(new Error('电话号码不能为空'))
        }
        setTimeout(() => {
            if (!Number.isInteger(+value)) {
                callback(new Error('请输入数字'))
            } else {
                if (phoneReg.test(value)) {
                    const params = {
                        account: getStore("account"),
                        phone: this.ruleForm.companyPhone,
                    }
                    checkPhoneExistApi(params).then(res=>{
                        if(res.data.data === true){
                            callback(new Error('该手机号已存在，请重新输入！'));
                        }else{
                            callback();
                        }
                    });
                } else {
                callback(new Error('电话号码格式不正确'))
                }
            }
        }, 100)
    }
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!value) {
      return callback(new Error('邮箱不能为空'))
      }
      setTimeout(() => {
          if (mailReg.test(value)) {
              callback()
          } else {
              callback(new Error('请输入正确的邮箱格式'))
          }   
      }, 100)
    }
    return {
        imageUrl: '',
        bgImage: '',
        ruleForm:{
          // companyAvatar:'',
          // companyBackground:'',
          companyName: '',
          companyLeader: '',
          companyPhone: '',
          companyEmail: '',
          companyAddress: '',
          companyIntroduction: '',
        },
        rules: {
          companyName: [
            { required: true, message: '请输入企业名称', trigger: 'blur' }
          ],
          companyLeader: [
            { required: true, message: '请输入企业联系人', trigger: 'blur' }
          ],
          companyPhone: [
            { validator: checkPhone, trigger: 'blur' }
          ],
          companyEmail: [
            { validator: checkEmail, trigger: 'blur' }
          ],
          companyAddress: [
            {  required: true, message: '请输入企业地址', trigger: 'blur' }
          ],
        }
    }
  },
  created(){
    const params = {
      account: getStore("account"),
    }
    getLoginCompanyInfo(params).then(res=>{
      this.imageUrl = res.data.data.avatar;
      this.bgImage = res.data.data.bgImage;
      this.ruleForm.companyName = res.data.data.name;
      this.ruleForm.companyLeader = res.data.data.leader;
      this.ruleForm.companyPhone = res.data.data.phone;
      this.ruleForm.companyEmail = res.data.data.email;
      this.ruleForm.companyAddress = res.data.data.address;
      this.ruleForm.companyIntroduction = res.data.data.introduction;
    })
  },
  methods:{
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 jpg或png格式 格式!');
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isJPG && isLt5M;
    },

    // 上传图片
    uploadCompanyBgImage(file){
      // 定义唯一文件名
      var fileName = 'company' + `${Date.parse(new Date())}` + '.jpg';
      client().multipartUpload(fileName, file.file).then(res=>{
        this.$message.success('上传成功！');
        this.bgImage = 'https://recruitment-files.oss-cn-chengdu.aliyuncs.com/' + fileName;
      });
    },

    // 上传图片
    uploadImage(file){
      // 定义唯一文件名
      var fileName = 'company' + `${Date.parse(new Date())}` + '.jpg';
      client().multipartUpload(fileName, file.file).then(res=>{
        this.$message.success('上传成功！');
        this.imageUrl = 'https://recruitment-files.oss-cn-chengdu.aliyuncs.com/' + fileName;
      });
    },

    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const data = {
              account: getStore("account"),
              avatar: this.imageUrl,
              bgImage: this.bgImage,
              name: this.ruleForm.companyName,
              leader: this.ruleForm.companyLeader,
              phone: this.ruleForm.companyPhone,
              email: this.ruleForm.companyEmail,
              address: this.ruleForm.companyAddress,
              introduction: this.ruleForm.companyIntroduction,
            }
            updateCompanyInfo(data).then(res=>{
              this.$message.success(res.data.message);
              this.$router.push("/backstage/personal/viewInfo");
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },

    resetForm(formName) {
        this.ruleForm = {};
    },

  }
}
</script>

<style scoped>
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
